import React, {PureComponent} from 'react';
import {Dimensions, Image, FlatList, StyleSheet, View} from 'react-native';
import ShopCard from '../../components/ShopCard';
import {get_subject_item} from '../../api/haoDan';
import Header from '../../components/Header';

const {width, height} = Dimensions.get('window');

export default class SubjectItem extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      list_loading: false,
      list_end: false,
      list: [],
      item: this.props.navigation.state.params.item,
    };
  }

  componentWillUnmount = () => {
    this.setState = (state, callback) => {
      return;
    };
  };

  componentDidMount() {
    this.GetData();
  }
  /**
   * 获取数据
   */
  GetData() {
    const {list_loading, list_end, item} = this.state;
    if (list_loading && list_end) {
      return;
    }
    this.setState(
      {
        list_loading: true,
        list_end: false,
      },
      () => {
        get_subject_item(item.id)
          .then((res) => {
            this.setState({
              list_loading: false,
              list: res,
            });

            this.rc && this.rc.finishRefresh();
          })
          .catch(() => {
            this.setState({
              list_loading: false,
              list_error: true,
            });
          });
      },
    );
  }
  render() {
    const {item, list} = this.state;
    return (
      <View style={styles.container}>
        <Header
          title={item.name}
          backgroundColor={'#E94F62'}
          backColor={'#fff'}
          titleColor={'#fff'}
        />
        <View
          style={{
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#E94F62',
            height: 200,
          }}>
          <View style={styles.swiper_container}>
            <Image
              style={styles.swiper_image}
              source={{
                uri: item.image,
              }}
            />
          </View>
        </View>
        <FlatList
          keyExtractor={(item1) => item1.productId}
          data={list}
          numColumns={2}
          onEndReachedThreshold={0.2}
          removeClippedSubviews
          renderItem={(item1) => <ShopCard item={item1} />}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F4F4F4',
  },
  background: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    height: 150,
    marginHorizontal: 15,
    paddingHorizontal: 15,
    paddingVertical: 30,
    borderRadius: 30,
  },
  swiper_container: {
    borderRadius: 10,
    height: (245 / 600) * (width - 30),
    width: width - 30,
  },
  swiper_image: {
    borderRadius: 15,
    width: width - 30,
    height: (245 / 600) * (width - 30),
  },
  list: {
    paddingHorizontal: 15,
    marginVertical: 10,
  },
  list_item: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#1ED0B8',
    height: 50,
    borderRadius: 20,
    paddingHorizontal: 20,
  },
});
